<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <!-- <script src="../js/myjquery.js"></script> -->
    <style>

        #title{
            background: orange;
        }
    </style>
</head>
<body>
    <div>
        <h3 id="title"  demo="wh2107-daydayup" class="one demo" >封装模拟 jQuery </h3>
        <ul class="list">
            <li>item_01</li>
            <li>item_02</li>
            <li>item_03</li>
            <li>item_04</li>
            <li>item_05</li>
            <li>item_06</li>
            <li>item_07</li>
            <li>item_08</li>
            <li>item_09</li>
            <li>item_10</li>
        </ul>
        <p>
            <input type="text" class="inp" value="Are you oK....">
        </p>
        <p>
            <label for="tips"> 
                <input type="checkbox" id="tips" >  请先同意我的霸王条款.
            </label>
        </p>
        <div class="box">
            <button class="sethtml">设置html</button>
            <button class="gethtml">获取html</button>
            <button class="show">点击显示</button>
            <button class="hide">点击隐藏</button>
            <button class="setwidth">设置宽度</button>
            <button class="getwidth">获取宽度</button>
            <button class="css">css操作</button>
            <button class="attr">attr</button>
            <button class="prop">prop</button>
            <button class="eq">eq</button>
            <button class="siblings">siblings</button>
            <button class="first">first</button>

        </div>
    </div>

    <script>
        // jQuery 是原生 Javascript 开发出来的代码库，通常被称为框架。 
        // jQuery 设计的宗旨是 “write Less，Do More”，即倡导写更少的代码，做更多的事情。
        // jQuery 通常被用来优化HTML文档操作、事件处理、动画设计和Ajax交互。

        // text()
        // html()
        // val()
        // show()
        // hide()
        // addClass()
        // removeClass()
        // css()
        // width()
        // height()
        // attr()
        // prop()
        // eq()
        // siblings()


        $(".list li").click(function(){
            // this ==> 标签 
            console.log(this)
            console.log(this.innerHTML)
            // console.log($('.list li').html())
        })
        
        $(".inp").on("input",function(){
            console.log(this.value)
        })

        $(".sethtml").on("click",function(){
            $("#title").html("hello - wh2107")
        })

        $(".gethtml").on("click",function(){
            console.log($("#title").html())
        })

        $(".show").on("click",function(){
            $("#title").show()
        })

        $(".hide").on("click",function(){
            $("#title").hide()
        })

        $(".getwidth").on('click',function(){
            console.log($("#title").width())
            console.log($("#title").height())

        })

        $(".setwidth").on('click',function(){
            $("#title").width(200)
            $("#title").height(50)
        })
        // css width height 
        
        $('.css').on("click",function(){
            console.log($("#title").css("width"))
            console.log($("#title").css("background"))

            // $("#title").css("color",'red');

            $("#title").css({
                color:'red',
                width:'200px',
                height:'200px',
                fontSize:'40px',
                border:"4px solid blue"
            });
        })

        $(".attr").on('click',function(){
            console.log($("#title").attr('demo') )
            $("#title").attr("myid","0831")
        })

        $(".prop").on("click",function(){
            // 节点私有属性 
            // $("#title").prop("className","news")  
            // // attrbiute 自定义属性  
            // console.log($("#title").prop("id"))      
            // console.log($("#title").prop("demo")) 

            if($("#tips").prop("checked")){
                $("#tips").prop("checked",false);
            }else{
                $("#tips").prop("checked",true);
            }
           
            // $("#title").addClass("one1","one2","one3")
            // $("#title").removeClass("one","demo")
        })

        $(".eq").on("click",function(){
            console.log($('.list li').eq(2))
            $(".list li").eq(2).css({color:'red',background:"pink"})
            $(".list li").eq(3).css("color","green");
        })


        $(".siblings").on("click",function(){
            $(".list li")
            .eq(2).css({color:"red",background:"pink"}).height(100).html("hello 2107").addClass("demo2107")
            .siblings()
            .css({
                color:"#f50",
                background:"#123456",
            })
            .width(100);
        })

        $(".first").on("click",function(){
           console.log( $('.list li').first())
           console.log( $('.list li').last())
           $(".first").toggleClass("demo")
           console.log($("#title").add("<span>hello - 2107 </span>"))
           $("#title").append("<span>hello - 2107 </span>")  // innerHTML ++ 
        //    append()
        })
    </script>
</body>
</html>